<template>
  <div class="app-content-wrap">
    <div class="g-content-title">事件查询</div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="eventId"
        label="事件编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="areaName"
        label="所属">
      </el-table-column>
      <el-table-column
        prop="moduleName"
        label="事件类型">
      </el-table-column>
      <el-table-column
        prop="eventTime"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="submitType"
        :formatter="submitTypeToText"
        label="提交类型">
      </el-table-column>
      <el-table-column
        prop="eventState"
        :formatter="eventStateToText"
        label="处理状态">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="viewDetail(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changeEventTable"
      :current-page.sync="resParams.currPage"
      :page-size="resParams.pageSize"
      layout="total, prev, pager, next"
      :total="resParams.totalCount">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'eventSearchList',
  data () {
    return {
      tableData: [],
      resParams: {
        currPage: 1,
        totalCount: 0,
        pageSize: 10
      },
      tempParams: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.tempParams = to.query

      let url = vm.$base.getUrl('infoByType')
      let params = {
        url: url,
        data: vm.tempParams
      }

      vm.$store.dispatch('getForm', params).then((res) => {
        var data = res.page
        if (data.list) {
          vm.tableData = data.list
        } else {
          vm.tableData = []
        }

        vm.resParams.totalCount = data.totalCount
        vm.resParams.currentPage = data.currPage
      })
    })
  },
  methods: {
    submitTypeToText: function (row) {
      return this.$base.getNameByConst('select', 'submitType', row.submitType)
    },
    eventStateToText: function (row) {
      return this.$base.getNameByConst('select', 'eventState', row.eventState)
    },
    // 切换页码
    changeEventTable: function (val) {
      this.tempParams.page = val
      let url = this.$base.getUrl('infoByType')
      let params = {
        url: url,
        data: this.tempParams
      }

      // this.currentPage = val;

      this.$store.dispatch('getForm', params).then((res) => {
        let data = res.page
        if (data.list) {
          this.tableData = data.list
        } else {
          this.tableData = []
        }

        this.resParams.totalCount = data.totalCount
        this.resParams.currentPage = data.currPage
      })
    },
    // 查看详情
    viewDetail: function (row) {
      this.$router.push({ name: 'eventSearchDetail', query: { 'eventSysId': row.eventSysId } })
    }
  }
}
</script>

<style scoped>

  .el-table {
    width: auto!important;
    text-align: center;
    margin: 10px;
  }

  .el-table >>> th {
    text-align: center;
  }

</style>
